<template>
  <el-table
    :data="tableData"
    :span-method="objectSpanMethod"
    border
    :summary-method="getSummaries"
    show-summary
    class="mt-20px"
  >
    <el-table-column prop="srName" label="评分指标" min-width="25%" />
    <el-table-column prop="smName" label="评分标准" min-width="45%" />
    <el-table-column prop="score" label="分值" min-width="10%" />
    <el-table-column label="自评得分" min-width="20%">
      <template #default="scope">
        <span v-if="isDetails">{{ scope.row.selfScore }}</span>
        <el-select
          :placeholder="'请选择' + scope.row.srName + '自评得分'"
          size="large"
          v-model="scope.row.selfScore"
          @change="scopeChange"
          style="width: 100%"
          v-else
        >
          <el-option
            v-for="item in scope.row.scores"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup name="Scoring">
import { useRoute, useRouter } from 'vue-router'
import { getScaleMarkList } from '@/api/projectManage/project'
import { nextTick } from 'vue'
const route = useRoute()
const { proxy } = getCurrentInstance()
const data = reactive({
  tableTotal: 0,
  tableData: []
})
const { tableTotal, tableData } = toRefs(data)
const props = defineProps({
  scaleMarkVos: {
    required: true,
    type: Array
  }
})
const isDetails = ref(false)
const isEdit = ref(false)
const newSumIndex = ref([]) //
const spanArr = ref([]) //是一个空的数组，用于存放每一行记录的合并数；
const pos = ref(0) //pos是spanArr的索引
const processed = ref(false)
watchEffect(() => {})
init()
/**
 * 初始化方法
 */
async function init() {
  isEdit.value =
    !!location.href.match(/editProject/) ||
    !!location.href.match(/projectDetails/) ||
    !!location.href.match(/workDetail/)
  processed.value = route.query?.processed
  isDetails.value =
    !!location.href.match(/projectDetails/) ||
    (!!location.href.match(/workDetail/) && !processed.value)
  if (isEdit.value) {
    //编辑情况
    tableData.value = JSON.parse(JSON.stringify(props.scaleMarkVos))
    proxy.$nextTick(() => {
      getSpanArr(tableData.value)
      scopeChange()
    })
  } else {
    // 新增的情况
    let response = await getScaleMarkList()
    tableData.value = response.rows
    proxy.$nextTick(() => {
      getSpanArr(tableData.value)
      scopeChange()
    })
  }
}
// 下拉框选择 计算
const scopeChange = val => {
  let sum = 0
  let data = JSON.parse(JSON.stringify(tableData.value))
  let arr = JSON.parse(JSON.stringify(newSumIndex.value))
  // data就是我们从后台拿到的数据
  for (var i = 0; i < data.length; i++) {
    for (var j = 0; j < arr.length; j++) {
      if (i == arr[j]) {
        sum += data[i].selfScore ? parseInt(data[i].selfScore) : 0
        break
      }
    }
  }
  tableTotal.value = sum
}
/** getSpanArr 获取单元格的合并行数（相同type则进行合并）
spanArr:[]//是一个空的数组，用于存放每一行记录的合并数；
pos:0 //pos是spanArr的索引
 * 1.如果是第一条记录（索引为0），向数组中加入１，并设置索引位置；
 * 2.如果不是第一条记录，则判断它与前一条记录是否相等，
 * 3.如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１，
以此往复，得到所有行的合并数，0即表示该行不显示
 * @param {*} data  table列表的数据
  * @param {*} type 字段
 */
const getSpanArr = data => {
  newSumIndex.value = []
  if (!data) {
    return
  }
  // data就是我们从后台拿到的数据
  for (var i = 0; i < data.length; i++) {
    if (i === 0) {
      // 第一行不处理
      spanArr.value.push(1)
      pos.value = 0
      newSumIndex.value.push(i)
    } else {
      // 判断当前元素与上一个元素是否相同
      if (data[i].srId == data[i - 1].srId) {
        spanArr.value[pos.value] += 1 // 首条相同名称行合并行数增加
        spanArr.value.push(0) // 当前行消除
      } else {
        newSumIndex.value.push(i)
        spanArr.value.push(1)
        pos.value = i
      }
    }
  }
}
/**objectSpanMethod
 *合并单元格
 * @param {*} param0
 * @param {*} SpanMethodProps
 */
const objectSpanMethod = (
  { row, column, rowIndex, columnIndex },
  SpanMethodProps
) => {
  if (columnIndex === 0 || columnIndex === 3) {
    // 评分指标 自评得分
    const _row = spanArr.value[rowIndex] //合并行数
    const _col = _row > 0 ? 1 : 0 // 合并列数，1：不改变，0：被消除
    return {
      rowspan: _row,
      colspan: _col
    }
  }
}
/** getSummaries
 * 自评分合计：
 * @param {*} param
 */
const getSummaries = param => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 2) {
      sums[index] = '自评分合计：'
      return
    }
    if (index === 3) {
      sums[index] = tableTotal.value
    }
  })

  return sums
}
defineExpose({
  tableData,
  tableTotal
})
</script>
